<template>
  <div>
    <el-autocomplete
      class="inline-input"
      v-model="seaWord"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
    >
      <template slot-scope="{ item }">
        <div class="list_one" v-if="!seaWord">
          <span>1</span>
          <div class="list_wrap">
            <div>
              <span>{{ item.searchWord }}</span>
              <span>{{ item.score }}</span>
            </div>
            <span v-if="item.content">{{ item.content }}</span>
          </div>
        </div>
        <!-- 第二种搜索建议 -->
        <div v-if="seaWord">
          第二种 胜多负少的发生
        </div>
      </template>
    </el-autocomplete>
  </div>
</template>
<script>
import { _hotSearchDetail, _Suggest } from '../network/search'

export default {
  created () {
    this.hetHotSearch()
  },
  methods: {
    querySearch (queryString, cb) {
      cb(this.list) //返回热门搜索
    },
    handleSelect (item) {
      //搜索建议列表 选中
      console.log(item)
      //搜索建议选择
      this.$router.push({
        name: 'searchinfo',
        params: {
          searchTxt: item.searchWord //传递搜索字段
        }
      })
    },
    async hetHotSearch () {
      var res = await _hotSearchDetail()
      console.log('------999', res)
      this.list = res.data.data
    }
  },
  watch: {
    // 监听输入框的值 的变化请求数据
    seaWord (newVal) {
      _Suggest(newVal).then(res => {
        console.log(res)
        this.list = res.data.result
        this.querySearch()
      })
    }
  },
  data () {
    return {
      seaWord: '', //搜索输入的内容
      hotList: [], //热门搜索建议的数据
      list: []
    }
  }
}
</script>

<style lang="less">
.el-popper {
  width: 500px !important;
}
.lists {
  width: 100%;
  padding: 0 5px;
  display: flex;
  align-items: center;
  .list_one {
    display: flex;
    margin-top: 15px;
    .list_wrap {
    }
  }
}
</style>
